<template>
  <div>
    <el-card>
    <!-- 搜索框和按钮 -->
    <el-row type="flex" justify="space-between" align="middle" style="margin: 8px 0 18px 0;">
      <el-col :span="12" class="inputSearch" style="display: flex;">
        <el-input
          v-model="searchQuery"
          placeholder="请输入标签"
          @input="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch" style="margin-left: 10px;">搜索标签</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="dialogTags = true">新增标签</el-button>
      </el-col>
    </el-row>

    <!-- 新增标签对话框 -->
    <el-dialog
      title="新增标签"
      :visible.sync="dialogTags"
      width="50%"
      @close="dialogTags = false"
    >
      <el-form :model="newTagForm" :rules="rules" ref="newTagForm" label-width="100px">
        <el-form-item label="标签名" prop="name">
          <el-input v-model="newTagForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="newTagForm.description"></el-input>
        </el-form-item>

        <!-- 类型选择 -->
        <el-form-item label="类型" prop="type">
          <el-select v-model="newTagForm.type" placeholder="请选择类型">
            <el-option label="POST" value="POST"></el-option>
            <el-option label="STORY" value="STORY"></el-option>
          </el-select>
        </el-form-item>

        <!-- 底部 -->
        <el-form-item>
          <el-button type="primary" @click="addTag">新增</el-button>
          <el-button @click="dialogTags = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 标签列表 -->
    <el-table
      :data="currentPageData"
      style="width: 100%;overflow-x: auto;overflow-y: auto;border-top: 2px solid #BBB;"
      >
      <el-table-column
        prop="id"
        label="编号"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="标签名"
      ></el-table-column>
      <el-table-column
        prop="description"
        label="描述"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="类型"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
      ></el-table-column>

      <!-- 操作 -->
      <el-table-column width="250" fixed="right" label="操作" style="display: flex;justify-content: space-between;">
        <template slot-scope="scope">
          <el-button type="primary" @click="showChangeTag(scope.row)">修改标签</el-button>
          <el-button type="primary" @click="showDeleteTag(scope.row)">删除标签</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改标签确认框，要回显信息 -->
    <el-dialog
      title="确认操作"
      :visible.sync="showChangeDialog"
      width="50%"
      @cancel="showChangeDialog = false"
    >
    <!-- 回显信息 -->
    <el-form :model="newTagForm" :rules="rules" ref="changeTag" label-width="100px">
        <el-form-item label="标签名" prop="name">
          <el-input v-model="newTagForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="newTagForm.description"></el-input>
        </el-form-item>

        <!-- 类型选择 -->
        <el-form-item label="类型" prop="type">
          <el-select v-model="newTagForm.type" placeholder="请选择类型">
            <el-option label="POST" value="POST"></el-option>
            <el-option label="STORY" value="STORY"></el-option>
          </el-select>
        </el-form-item>

        <!-- 底部 -->
        <el-form-item>
          <el-button type="primary" @click="changeTag">修改</el-button>
          <el-button @click="showChangeDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="确认操作"
      :visible.sync="showDeleteDialog"
      width="40%"
      @cancel="showDeleteDialog = false"
    >
      <span>您确定要执行此操作吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDeleteDialog = false;">取 消</el-button>
        <el-button type="primary" @click="deleteTag()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>

    </el-card>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      // 用户搜索
      searchQuery: '',

      // 当前展示标签内容
      currentPageData: [],

      // 标签总条数
      total: 0,

      // 当前页面
      currentPage: 1,

      // 每页展示数
      pageSize: 10,

      // 弹窗控制
      dialogTags: false,

      // 这个是新增标签输入
      newTagForm: {
        type: ''
      },

      // 这个是检测输入是否合规
      rules: {
        name: [
          { required: true, message: '请输入标签名', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入标签描述', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入标签类型', trigger: 'blur' }
        ]
      },

      // 修改弹窗
      showChangeDialog: false,

      // 删除弹窗
      showDeleteDialog: false
    }
  },

  // 一进页面就请求数据
  mounted () {
    this.fetchData()
  },

  methods: {
    // 更新表格数据
    async fetchData () {
      try {
        // 请求后端数据 + 携带参数
        const response = await axios.post('http://localhost:8080/pixington/system/category/page?page=1&size=10', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        })

        // 返回当前页数据、总条数，然后显示到页面上
        this.currentPageData = response.data.items
        this.total = response.data.total
      } catch (error) {
        console.error(error)
      }
    },

    // 切换请求数据
    handleCurrentChange (val) {
      // 这里的val是页码
      // console.log(val, '1')
      this.currentPage = val
      this.fetchData()
    },

    // 搜索标签
    async handleSearch () {
      if (this.searchQuery.trim() !== '') {
        // 如果用户输入，并点击了搜索，即返回搜索的信息
        await axios.post('http://localhost:8080/pixington/system/category/page?page=1&size=10', {
          params: {
            page: this.currentPage,
            size: this.pageSize
          }
        })
          .then((response) => {
          // 把后端返回的数据赋给搜索内容
            this.currentPageData = response.data
            this.total = response.total
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: 'warning',
              duration: 2000
            })
          })
      }
      // 如果用户输入为空，即返回当前页面信息
      if (this.searchQuery.trim() === '') {
        // console.log('用户清空了输入')
        // 重新渲染列表
        this.fetchData()
      }
    },

    // 新增标签
    async addTag () {
      // console.log(this.newTagForm.name, this.newTagForm.description, this.newTagForm.type)
      // 判断是否输入了
      this.$refs.newTagForm.validate(async (valid) => {
        if (!valid) {
          this.$message({
            message: '请检查你的输入！',
            type: 'warning',
            duration: 2000
          })
        } else {
          await axios.get('http://localhost:8080/pixington/system/category/add', {
            name: this.newTagForm.name,
            description: this.newTagForm.description,
            type: this.newTagForm.type
          })
            .then(() => {
              // 关闭弹窗
              this.dialogTags = false
              // 显示成功标签
              this.$message({
                message: '添加成功！',
                type: 'success',
                duration: 2000
              })

              // 重新渲染
              this.fetchData()

              // 清空表单输入
              this.newTagForm = {
                name: '',
                description: '',
                type: ''
              }
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: 'warning',
                duration: 2000
              })
            })
        }
      })
    },

    // 修改标签框
    showChangeTag (row) {
      // console.log(row.id)
      // 显示
      this.showChangeDialog = true

      // 回显数据
      this.newTagForm = row
    },

    // 提交新标签
    async changeTag () {
      await axios.put('http://localhost:8080/pixington/system/category/update/1734487175179628545', {
        id: this.newTagForm.id,
        name: this.newTagForm.name,
        description: this.newTagForm.description,
        type: this.newTagForm.type
      })
        .then((res) => {
          // 关闭弹窗
          this.showChangeDialog = false
          // 显示成功信息
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 2000
          })
          // 重新渲染
          this.fetchData()

          // 清空表单输入
          this.newTagForm = {
            id: '',
            name: '',
            description: '',
            type: ''
          }
        })
        .catch((err) => {
          // 显示失败信息
          this.$message({
            message: err,
            type: 'success',
            duration: 2000
          })

          this.showChangeDialog = false
        })
    },

    // 显示删除标签弹窗
    showDeleteTag (row) {
      console.log(row.id)
      // 显示
      this.showDeleteDialog = true
      // 保存数据
      this.newTagForm = row
    },

    // 提交删除操作
    async deleteTag () {
      // 注意这里没有keyword，按照后续文档要求
      await axios.get('http://localhost:8080/pixington/system/category/page?page=1&size=10&type=POST&keyword=厚涂', {
        id: this.newTagForm.id
      })
        .then((res) => {
          // 关闭弹窗
          this.showDeleteDialog = false
          // 显示成功信息
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 2000
          })
          // 重新渲染
          this.fetchData()

          // 清空表单输入
          this.newTagForm = {
            id: '',
            name: '',
            description: '',
            type: ''
          }
        })
        .catch((err) => {
          // 显示失败信息
          this.$message({
            message: err,
            type: 'success',
            duration: 2000
          })

          this.showDeleteDialog = false
        })
    }

  }
}
</script>

<style>

</style>
